<template>
	<div>
		<el-dialog title="添加文章" :visible.sync="dialogVisible" width="50%">
			<el-form ref="ruleForm" :rules="rules" :model="form" label-width="80px">
				<el-form-item label="标题" prop="title">
					<el-input v-model="form.title"></el-input>
				</el-form-item>
				<el-form-item label="名称" prop="name">
					<el-input v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item label="图片" prop="images">
					<el-input v-model="form.images" v-if="false"></el-input>
					<upload ref="upload" :limit="3" :tempImg="form.images"></upload>
				</el-form-item>
				<el-form-item label="文本">
					<editor ref="editor" :detail="form.detail"></editor>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import editor from '@/components/editor/index';
	import upload from '@/components/upload.vue';
	export default {
		components: {
			editor,
			upload
		},
		data() {
			return {
				dialogVisible: false,
				form: {
					id:"",
					name: '',
					title: "",
					images: []
				},
				rules: {
					name: [{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					}, ],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur'
					}, ],
					images: [{
						required: true,
						message: '请选择图片',
						trigger: 'blur'
					}, ],


				}

			}
		},
		methods: {
			submitForm(formName) {
				this.form.images = this.$refs.upload.imageListString;
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.axios.post("/admin/user/addActivity", {
							name: this.form.name,
							title: this.form.title,
							images: this.form.images,
							detail: this.$refs.editor.content,
							id:this.form.id,
						}).then(res => {
							this.$message.success({
								message: "添加成功",
								onClose: (res) => {
									location.reload()
								}
							})
						}).catch(error => {

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
		}
	}
</script>

<style>
</style>
